マウスに合わせて画像が重なる順序を変化させる
前回の「カーソルの位置に合わせてサブメニューを表示する」でも利用したテクニックですが、スタイルシートを利用すると「DIV」タグをレイヤーとして扱えます。今回は、このテクニックを応用し、複数の画像を重ねて配置する方法を紹介します。

→ 各画像を「DIV」タグでブロック化する
 
画像をレイヤー化するには、各画像をブロック化する必要があります。まずは、画像を表示する「IMG」タグをそれぞれ「DIV」タグで挟んで記述します。このとき、各「DIV」タグ〜「/DIV」の間を改行しないようにします。 ※「DIV」タグ〜「/DIV」の間に改行を挿入すると、Internet Explorerで表示する際に、上下に余計な隙間が表示されてしまいます。
<DIV><IMG src="photo1.jpg"></DIV>

<DIV><IMG src="photo2.jpg"></DIV>

<DIV><IMG src="photo3.jpg"></DIV>

<DIV><IMG src="photo4.jpg"></DIV>

<DIV><IMG src="photo5.jpg"></DIV>


→ DIVタグをレイヤー化し、位置を指定する
 
続いて、「DIV」タグをレイヤー化します。これは、各「DIV」タグにスタイルシート（style属性）を追加し、「position:relative」と記述すると実現できます。「position:relative」は、本来表示されるべき位置から相対的にずらして配置するスタイルシートで、その位置を「top」（上下のずれ）と「left」（左右のずれ）で指定します。なお、今回の例では、各画像の高さ150ピクセルとなるため、相対位置は150ピクセルずつずらして、以下のように指定します。
  • Photo1（左上：本来の位置、上下の間隔0px、左からの位置0px）
    top:0px / left:0px
  • Photo2（右上、上下の間隔0px、左からの位置300px）
    top:（0-150）＝150px / left:300px
  • Photo3（右上、上下の間隔120px、左からの位置150px）
    top:（120-150×2）＝-180px / left:150px
  • Photo4（右上、上下の間隔240px、左からの位置0px）
    top:（240-150×3）＝-210px / left:（100+200）＝0px
  • Photo5（右上、上下の間隔240px、左からの位置300px）
    top:（240-150×4）＝-360px / left:（100+200）＝300px
<DIV style="position:relative; top:0px; left:0px"><IMG src="photo1.jpg"></DIV>

<DIV style="position:relative; top:-150px; left:300px"><IMG src="photo2.jpg"></DIV>

<DIV style="position:relative; top:-180px; left:150px"><IMG src="photo3.jpg"></DIV>

<DIV style="position:relative; top:-210px; left:0px"><IMG src="photo4.jpg"></DIV>

<DIV style="position:relative; top:-360px; left:300px"><IMG src="photo5.jpg"></DIV>


→ レイヤーが重なる順序を指定する
 
「DIV」タグをレイヤー化した場合は、後に記述したレイヤーほど上に重なって表示されます。ただし、この重なり順は自分で指定することも可能です。重なり順を指定する場合は、スタイルシートに「z-index」を追加します。「z-index」は大きい値を指定するほど、そのレイヤー（「DIV」タグ）を上に表示できます。
<DIV style="position:relative; top:0px; left:0px; z-index:1"><IMG src="photo1.jpg"></DIV>

<DIV style="position:relative; top:-150px; left:300px; z-index:4"><IMG src="photo2.jpg"></DIV>

<DIV style="position:relative; top:-180px; left:150px; z-index:3"><IMG src="photo3.jpg"></DIV>

<DIV style="position:relative; top:-210px; left:0px; z-index:2"><IMG src="photo4.jpg"></DIV>

<DIV style="position:relative; top:-360px; left:300px; z-index:5"><IMG src="photo5.jpg"></DIV>


G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I